<template>
  <!--共有头部-->
  <header class="header">
    <h1><a href="javascript:;"><img src="../assets/img/logo.svg"></a></h1>
    <span :class="downIsShow ? 'down active' : 'down'" @mouseenter="downIsShow = true;" @mouseleave="downIsShow = false;">
      <router-link class="link" to="/quote"><i>+</i>我要下单</router-link>
    </span>
    <div class="right">
      <a href="javascript:;" :class="getMoney ? 'active' : 'down'" @mouseenter="getMoney = true;" @mouseleave="getMoney = false;">赚钱神器</a>
      <i></i>
      <span class="register">
        <router-link class="link" to="/register">注册</router-link>
      </span>
      <span class="login"  v-if="islogin==false">
        <router-link class="link" to="/login">登录</router-link>
      </span>

      <span class="login"  v-else>
        <a href="javascript:;" class="link" @click="logout()">退出登录</a>
      </span>
    </div>
  </header>
</template>

<script>
    import axios from 'axios'
    export default {
        name: '',
        data () {
            return {
              downIsShow: false,
              getMoney: false,
              islogin:false,
            }
        },
        components: {},
        created(){
            var userinfo=localStorage.getItem('userinfo');
            if(userinfo!='' && userinfo!=null){
                this.islogin=true;
            }
        },
        methods: {
            logout(){
                var that=this;
                axios.get(this.HOST+'/api/User/logout')
                    .then(function (response) {
                        var code=response.data.code;
                        if(code==1){
                            that.islogin=false;
                            localStorage.removeItem("userinfo");
                            alert(response.data.msg);
                            this.$router.go('/login');
                        }else{
                            alert("出错啦");
                        }
                    })
                    .catch(function (response) {
                        console.log(response);
                    });
            }
        },
        watch: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .header{
    font-weight: 300;
    height: 65px;
    background-color: #000;
    color: white;
    min-width: 1000px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    padding: 0 40px;
  }
  .header>h1 img{
    height: 30px;
  }
  .header i {
    font-style: normal;
    font-size: 24px;
    position: relative;
    top: 2px;
    right: 5px;
  }
  .down{
    padding: 0 5px;
    cursor: pointer;
    font-size: 16px;
    color: #e0e1e1;
    height: 100%;
    line-height: 60px;
  }
  .down a {
    color: #e0e1e1;
  }
  .right a{
    border-bottom: 4px solid #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 60px;
    display: inline-block;
    height: 100%;
    padding: 0 5px;
    font-size: 15px;
    color: #e0e1e1;
  }
  .register{
    margin: 0 40px;
  }
  .right span{
    cursor: pointer;
    font-size: 15px;
    color: #e0e1e1;
  }
  .right i{
    display: inline-block;
    height: 20px;
    position: relative;
    top: 4px;
    margin: 0 20px;
    border-left: 1px solid white;
  }
  .login{
    padding: 6px 25px;
    background-color: #4d5775;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
  }
  .active{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 4px solid #3cc8b4!important;
  }
</style>
